import React, { useState } from 'react';
import { 
  Button, 
  Card, 
  Alert, 
  Input, 
  Space, 
  Tag, 
  Progress, 
  Statistic, 
  notification
} from 'antd';

// 交互式计数器组件
export const InteractiveCounter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <Card title="交互式计数器" style={{ margin: '16px 0' }}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Statistic title="当前计数" value={count} />
        <Space>
          <Button type="primary" onClick={() => setCount(count + 1)}>
            增加
          </Button>
          <Button onClick={() => setCount(count - 1)}>
            减少
          </Button>
          <Button danger onClick={() => setCount(0)}>
            重置
          </Button>
        </Space>
      </Space>
    </Card>
  );
};

// 进度展示组件
export const ProgressDemo: React.FC = () => {
  const [percent, setPercent] = useState(30);

  const increase = () => {
    setPercent(prev => Math.min(prev + 10, 100));
  };

  const decline = () => {
    setPercent(prev => Math.max(prev - 10, 0));
  };

  return (
    <Card title="进度条演示" style={{ margin: '16px 0' }}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Progress percent={percent} />
        <Progress percent={percent} status="active" />
        <Progress 
          percent={percent} 
          strokeColor={{
            '0%': '#108ee9',
            '100%': '#87d068',
          }}
        />
        <Space>
          <Button onClick={decline}>-</Button>
          <Button onClick={increase}>+</Button>
        </Space>
      </Space>
    </Card>
  );
};

// 通知演示组件
export const NotificationDemo: React.FC = () => {
  const openNotification = (type: 'success' | 'info' | 'warning' | 'error') => {
    notification[type]({
      message: '通知标题',
      description: `这是一个${type}类型的通知消息，用于演示Antd的通知功能。`,
      duration: 3,
    });
  };

  return (
    <Card title="通知演示" style={{ margin: '16px 0' }}>
      <Space>
        <Button type="primary" onClick={() => openNotification('success')}>
          成功通知
        </Button>
        <Button onClick={() => openNotification('info')}>
          信息通知
        </Button>
        <Button onClick={() => openNotification('warning')}>
          警告通知
        </Button>
        <Button danger onClick={() => openNotification('error')}>
          错误通知
        </Button>
      </Space>
    </Card>
  );
};
